<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="../css/reset.css">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<style>
		html, body {
			height: 100%;
		}
		.boxed {
			position: relative;
			min-height: 100%;
			min-width: 1000px;
		}
		header {
			position: relative;
			top: 0;
			left: 0;
			width: 100%;
			min-width: 1000px;
			height: 75px;
			background-color: #313048;
		}
		.header-con {
			width: 1000px;
			height: 75px;
			margin: 0 auto;
		}
		.navbar-header {
			float: left;
			width: 138px;
			height: 75px;
		}
		.navbar-header img {
			display: block;
			width: 138px;
			height: 75px;
		}
		.header-con ul {
			float: left;
			padding-left: 85px;
		}
		.header-con li {
			float: left;
		}
		.header-con li a {
			padding: 0 17px;
			line-height: 75px;
			font-size: 16px;
			color: #fff;
			font-weight: lighter;
		}
		.peo-message {
			position: absolute;
			top: 0;
			right: 0;
			width: 120px;
			height: 28px;
			padding: 23.5px 50px;
		}
		.peo-cir {
			float: left;
			width: 28px;
			height: 28px;
			border-radius: 50%;
			background-color: #cbcbcb;
		}
		.peo-message em {
			float: left;
			line-height: 28px;
			font-size: 16px;
			margin: 0 4px 0 8px;
			color: #fff;
		}
		.down-list {
			float: left;
			width: 28px;
			height: 28px;
			background: url("../images/down-list.png") no-repeat center center;
			background-size: 50%;
		}
		.boxed {
			width: 1000px;
			height: 800px;
			margin: 0 auto;
			padding-top: 9px;
		}
		.atelier {
			float: left;
			margin: 62px 0;
			padding: 40px 0px 57px 60px;
			background-color: #fff;
		}
		.ate-tip {
			float: left;
			margin-bottom: 32px;
		}
		.ate-tip h2 {
			float: left;
			margin-right: 20px;
			line-height: 58px;
			font-size: 28px;
			text-indent: 2px;
		}
		.ate-tip div {
			float: left;
			padding-top: 27.5px;
		}
		.ate-tip span {
			float: left;
			width: 15px;
			height: 15px;
			margin-right: 26px;
			background: url("../images/studio-tip.png") no-repeat;
			background-size: 100% 100%;
		}
		.ate-tip em {
			float: left;
			font-size: 12px;
			color: #b6b6b6;
		}
		.atelier ul {
			float: left;
			margin-bottom: 58px;
		}
		.atelier ul li {
			float: left;
			width: 270px;
			height: 125px;
			background-color: #ff5a60;
			margin-right: 35px;
		}
		.install {
			float: right;
			padding-right: 60px;
		}
		.get-into, .set-stdio {
			float: right;
			width: 200px;
			height: 50px;
			border: 1px solid #37354e;
			text-align: center;
			line-height: 50px;
			margin-left: 40px;
			background-color: #fff;
			cursor: pointer;
		}
		.get-into:hover, .set-stdio:hover {
			background-color: #b9b8d5;
			color: #fff;
		}
		.get-into:active, .set-stdio:active {
			background-color: #4a4868;
		}
		.ate-stu {
			float: left;
			padding: 33.75px 16.5px 33.75px 26px;
		}
		.ate-stu div {
			display: block;
			width: 57.5px;
			height: 57.5px;
			background: url("../images/studio-peo.png") no-repeat;
			background-size: 100% 100%;
		}
		.ate-data h3 {
			text-align: center;
			font-size: 50px;
			line-height: 52px;
			color: #fff;
		}
		.ate-data h4 {
			text-align: center;
			color: #fff;
			font-size: 12px;
		}
		.ate-data {
			float: left;
			width: 129px;
			padding-top: 28px;
		}
		.atelier .mid {
			background-color: #4a4868;
		}
		.controls {
			width: 783px;
			height: 60px;
			margin: 0 auto;
		}
		.controls div {
			width: 319px;
			height: 60px;
			text-align: center;
			line-height: 60px;
			color: #fff;
			font-size: 18px;
			background-color: #474564;
		}
		.pay {
			float: left;
			cursor: pointer;
		}
		.add-studio {
			float: right;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<header>
		<div class="header-con">
			<a class="navbar-header" href="">
				<img src="../images/logo.png" alt="">
			</a>
			<ul>
				<li>
					<a href="">首页</a>
				</li>
				<li>
					<a href="">人资管理</a>
				</li>
				<li>
					<a href="">指标设置</a>
				</li>
				<li>
					<a href="">数据统计</a>
				</li>
				<li>
					<a href="">工作时设置</a>
				</li>
				<li>
					<a href="">财务管理</a>
				</li>
			</ul>
		</div>
		<div class="peo-message">
			<div class="peo-cir">
				<!-- <img src="" alt=""> -->
			</div>
			<em>黑披士</em>
			<span class="down-list"></span>
			<!-- <ul>
				<li>123</li>
			</ul> -->
		</div>
	</header>
	<div class="boxed">
		<div class="atelier">
			<div class="ate-tip">
				<h2>店铺名</h2>
				<div class="clearfix">
					<span></span>
					<em>到期时间：2017-05-18</em>	
				</div>
			</div>
			<ul>
				<li>
					<div class="ate-stu">
						<div></div>	
					</div>
					<div class="ate-data clearfix">
						<h3>78</h3>
						<h4>新增学员</h4>
					</div>
				</li>
				<li class="mid">
					<div class="ate-stu">
						<div></div>	
					</div>
					<div class="ate-data clearfix">
						<h3>78</h3>
						<h4>新增学员</h4>
					</div>
				</li>
				</li>
				<li>
					<div class="ate-stu">
						<div></div>	
					</div>
					<div class="ate-data clearfix">
						<h3>78</h3>
						<h4>新增学员</h4>
					</div>
				</li>
				</li>
			</ul>
			<div class="install">
				<div class="get-into">
					分店设置
				</div>
				<div class="set-stdio">
					进入分店
				</div>
			</div>
		</div>
		<div class="controls">
			<div class="pay">充值缴费</div>
			<div class="add-studio">添加分店</div>
		</div>
	</div>
	<script src="../js/jquery-1.12.3.js"></script>
	<script>
		
	</script>
</body>
</html>